<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-focus />
      <div v-red>使用指令改变字体颜色</div>
      <div v-color='green'>使用指令改变字体颜色</div>
      <input type="text" v-model="tel" v-phone v-focus>{{tel}}
    </div>
  </body>
  <script src="../lib/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          tel: "123",
        };
      },
      directives: {
        red: {
          mounted(el) {
            el.style.color = "blue";
          },
        },
        color: {
          mounted(el, { value }) {
            console.log(value);
            el.style.color = value;
          },
        },
        phone: {
          mounted(el) {
            if (/^1[3-9]\d{9}$/.test(el.value)) {
              el.style.color = "green";
            } else {
              el.style.color = "black";
            }
          },
          updated(el) {
            if (/^1[3-9]\d{9}$/.test(el.value)) {
              el.style.color = "green";
            } else {
              el.style.color = "white";
            }
          },
        },
      },
    });

    //全局自定义
    app.directive("focus", {
      mounted(el) {
        el.focus();
      },
    });

    app.mount("#app");
  </script>
</html>
